<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实体卡类型管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg" >
    <div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
        <div class="row">
            <div class="col-sm-12">
                <div class="toolbar">
                        <div id="toolbar">
                            <button id="btn_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;新增</button>
                            <button id="btn_del" class="btn btn-w-s btn-danger"><i class="fa fa-times-circle"></i>&nbsp;批量删除</button>
                            <%--<button id="button" class="btn btn-primary " ><i class="fa fa-check-circle"></i>&nbsp;获取选中</button>--%>
                            <%--<button id="btn_getCheck姓名" class="btn btn-primary " ><i class="fa fa-check-square"></i>&nbsp;获取选中ChekBox</button>--%>
                        </div>
                </div>
                <span id="spancc" class="spancc"></span>
                <div class="row">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>搜索条件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content" >
                            <div class="row">
                                <div class="col-md-2"><input placeholder="券种名称" class="form-control" id="search_customer"></div>
                                <%--<div class="col-md-2"><input placeholder="开始日期" id="search_startdate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" id="start"></div>--%>
                                <%--<div class="col-md-2"><input placeholder="结束日期" id="search_enddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" id="end"></div>--%>
                                <div class="col-md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button></div>

                            </div>
                        </div>
                    </div>
                </div>
                <table id="exampleTablePagination"></table>
            </div>
        </div>
    </div>

    <script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
    <script>

    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript">
            //初始化表格对象
            var $table = $('#exampleTablePagination');
            /*
                获取选中行的相关数据
            */
            $(function () {
                $table.on('click-row.bs.table', function (e, row, $element) {
                    $('.success').removeClass('success');
                    $($element).addClass('success');
                });
                $('#button').click(function () {
                    alert('Selected name: ' + getSelectedRow().userName);
                });
            });
            function getSelectedRow() {
                var index = $table.find('tr.success').data('index');
                return $table.bootstrapTable('getData')[index];
            }

            /*
               操作按钮的初始化
            */
            function userOperation(value, row, index) {
                return [
                            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
                            '<i class="glyphicon glyphicon-edit"></i>',
                            '</a>',
                            '<a class="remove ml10" href="javascript:void(0)" title="删除">',
                            '<i class="glyphicon glyphicon-remove"></i>',
                            '</a>'
                        ].join('');
            }
            //每个按钮对应的事件
//            window.actionEvents = {
//                'click .edit': function (e, value, row, index) {
//                    alert('You click like icon, row: ' + JSON.stringify(row));
//                    //弹出编辑层
//                    showPopup(1,value);
//                },
//                'click .remove': function (e, value, row, index) {
//                    alert('You click remove icon,: ' + JSON.stringify(row));
//
//                }
//            };

                    /*
                        每一列详情格式化数据
                     */
            function formDetail(index, row) {
//                return row.detail+index;
            }


            function showPopup(type,id){
                var url = "";
                if(type==0) {
                    url = '${pageContext.request.contextPath}/jsp/activity/cardType/cardTypeDetail.jsp';
                }else if(type==1) {
                    url = '${pageContext.request.contextPath}/cardType/toEdit.ac?id='+id;
                }
                //自定页
                parent.layer.open({
                    type: 2,
                    shift:4,//动画类型
                    moveType:1,
                    maxmin: true,
                    shadeClose: true, //开启遮罩关闭
                    area: ['700px', '530px'],
                    content: url,
                    success: function(layero, index){

                    },
                    cancel: function(index){
//                        $table.bootstrapTable('refresh', queryParams);
//                        return true;
                    },
                    close  : function(index){
//                        $table.bootstrapTable('refresh', queryParams);
                    }
                });
            }

            ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

            $table.bootstrapTable({
                url: "${pageContext.request.contextPath}/cardType/showDatas.ac",
                method: 'post',
                contentType: "application/x-www-form-urlencoded",//必须的
                dataType: "json",
                pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
                height: ($(window).height()-200) ,
                //cardView:true,//是否自适应手机
                pagination: true, //分页
               // queryParamsType: "limit",
                singleSelect: false,
                cache:false,
                sortName:"createTime",
                search: false, //显示搜索框
                showColumns:false,
                showRefresh:false,
                showToggle:false,
                showPaginationSwitch:false,
                smartDisplay:true,
                detailView:true,
                toolbar:"#toolbar",
                queryParams: queryParams,//参数
                searchOnEnterKey:true,
                detailFormatter:function(index, row, element){
                    return row.notes;
                },
                sidePagination: "server", //服务端处理分页
                columns: [
                {
                    visible:false,
                    field:'id'
                },
                {
                    title:'选择',
                    align:'center',
//                    formatter:stateFormatter,
                    checkbox:true
                },
                {
                    title: '卡券名称',
                    field: 'name',
//                    titleTooltip: '点击可以进行排序操作',
//                    sortStable:true,
                    align: 'center'
                },
                {
                    title: '返劵比例',
                    field: 'percentage',
//                    titleTooltip: '点击可以进行排序操作',
//                    sortStable:true,
                    align: 'center',
                    formatter:function(value,row,index){
                        return value + "%";
                    }
                },
                {
                    title: '操作人',
                    field: 'userName',
//                    sortStable:true,
                    align: 'center'
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    align: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    events:{
                        'click .edit': function (e, value, row, index) {
                            //弹出编辑层
//                            alert('You click like icon, row: ' + JSON.stringify(value));
                            showPopup(1,row.id);
                        },
                        'click .remove': function (e, value, row, index) {
                            var arr=[row.id];
                            deleteGrid(arr);
                        }
                    },
                    formatter:function(value,row,index){
                        return [
                            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
                            '<i class="glyphicon glyphicon-edit"></i>',
                            '</a>',
                            '<a class="remove ml10" href="javascript:void(0)" title="删除">',
                            '<i class="glyphicon glyphicon-remove"></i>',
                            '</a>'
                        ].join('');
                    }
                }
            ]
            });

            /*
                搜索按钮
            */
            $("#btn_search").click(function(){
                $table.bootstrapTable('selectPage', 1);
                $table.bootstrapTable('refresh', queryParams);
            });

            /*
                传递的参数
            */
            function queryParams(params) {
                var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit: params.limit,  //页面大小
                    offset: params.offset, //页码
                    pageindex:params.pageNumber,
                    name: $("#search_customer").val(),
                };
                return temp;
            }
            ///////////////////////////////////////////////////////////////toolbar///////////////////////////////////////
            //新增
            $("#btn_add").click(function(){
                showPopup(0,null);
            });

            //批量删除
            $("#btn_del").click(function(){
                var ids=getSelections();
                //执行批量删除
                deleteGrid(ids);
            });

            /*
                批量删除方法体
             */
            function deleteGrid(ids){
                if(ids.length>0){
                    swal({
                        title: "您确定要删除这些信息吗",
                        text: "删除后将无法恢复，请谨慎操作！",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "删除",
                        cancelButtonText:"取消",
                        closeOnConfirm: false
                    }, function () {
                        //执行批量删除
                        $.ajax( {
                            url:'${pageContext.request.contextPath}/cardType/deByIds.ac',// 跳转到 action
                            data:{
                                ids :ids.toString()
                            },
                            type:'post',
                            cache:false,
                            dataType:'json',
                            success:function(data) {
                                if(data.success){
                                    swal("删除成功！", "您已经删除了这条信息。", "success");
                                    //当前表格刷新
                                    $table.bootstrapTable('refresh');
                                }else{
                                    swal("删除失败！", "未能删除这些信息。", "error");
                                }
                            },
                            error : function() {
                                alert("异常！");
                            }
                        });

                    });
                }else{
                    sweetAlert("无法操作！", "请勾选需要删除的信息!", "error");
                }
            }

            //获取选中的CheckBox
            $("#btn_getCheck").click(function(){
               alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
               alert("客户信息:"+$table.bootstrapTable('getSelections')[0].userName);
            });

            /*
            获取所有选中的CheckBox的主键值 【数组】
             */
            function getSelections() {
                return $.map($table.bootstrapTable('getSelections'), function (row) {
                    return row.id;
                });
            }

            /*
                BootStrapTable CheckBox 状态初始化
             */
            function stateFormatter(value, row, index) {
                if (row.id === 2) {
                    return {
                        disabled: true,
                        checked: true
                    };
                }
                if (row.id === 0) {
                    return {
                        disabled: true,
                        checked: true
                    }
                }
                return value;
            }

        </script>
</body>


</html>
